* {
	font-family: Consolas, "Courier New", Courier, Hack, "微软雅黑";
}
body {
	margin: 0;
	overflow: hidden;
}
img {
	z-index: 1;
}
.container {
	display: flex;
	width: 100%;
	justify-content: center;
}

#keyboard {
	width: 21rem;
	height: 21rem;
	display: grid;
	grid-template-columns: 5rem 5rem 5rem 5rem;
	grid-template-rows: 5rem 5rem 5rem 5rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: black;
	margin: 0;
	padding: 0;
}
.key {
	width: 4rem;
	margin: 1rem;
	padding: 0;
}

.wire {
	margin: 0;
	padding: 0;
	position: relative;
}
.wire[low="1"] {
	border-color: #b0b0b0;
}
.row {
	border-style: solid;
	border-width: 0 0 0.12rem 0;
	width: 313px;
	height: 0;
}
.col {
	border-style: solid;
	border-width: 0 0.12rem 0 0;
	height: 21rem;
	width: 0;
}
#wire-7 {
	top: -278.4px;
	left: -35px;
}
#wire-6 {
	top: -199.4px;
	left: -35px;
}
#wire-5 {
	top: -120.4px;
	left: -35px;
}
#wire-4 {
	top: -41.4px;
	left: -35px;
}
#wire-3 {
	top: -289px;
	top: -296.5px;
	left: 72px;
}
#wire-2 {
	top: -632.5px;
	left: 152px;
}
#wire-1 {
	top: -968.5px;
	left: 232px;
}
#wire-0 {
	top: -1304.5px;
	left: 312px;
}

.port-bit {
	position: relative;
	margin: 0;
	padding: 0;
	max-width: fit-content;
}
.port-bit[low="1"] {
	color: #b0b0b0;
}
#port-bit-7 {
	top: -102.3rem;
	left: -70px;
}
#port-bit-6 {
	top: -98.5rem;
	left: -70px;
}
#port-bit-5 {
	top: -94.7rem;
	left: -70px;
}
#port-bit-4 {
	top: -90.9rem;
	left: -70px;
}
#port-bit-3 {
	top: -86rem;
	left: 57px;
}
#port-bit-2 {
	top: -87.2rem;
	left: 137px;
}
#port-bit-1 {
	top: -88.4rem;
	left: 217px;
}
#port-bit-0 {
	top: -89.6rem;
	left: 297px;
}

.input {
	position: absolute;
	top: 26.5rem;
	margin: 0;
	padding: 0;
}
input {
	width: 5rem;
}
.binary {
	font-style: italic;
	display: inline;
}
.binary[low="1"] {
	color: #b0b0b0;
};

.hidden {
	display: none;
}